<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/index2.css"/>
    <link rel="stylesheet" type="text/css" href="css/index_style.css"/>
    <link rel="stylesheet" type="text/css" href="css/alert.css"/>
    <link rel="stylesheet" type="text/css" href="css/threeCharts.css"/>
    <link rel="stylesheet" type="text/css" href="css/table.css"/>
    <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.bootcss.com/echarts/3.7.1/echarts.min.js"></script>
    <!--引入中国的地图数据js文件，引入后会自动注册地图名字和数据-->

    <script src="js/china.js"></script>
    <script src="js/total.js"></script>
    <script type="text/javascript" src="js/newAdd.js"></script>
</head>
<body>

<!-- 页面头部区域 -->
<div id="head_content">
    <div class="head_logo">
        <img src="img/baidu_logo.png" height="25"/>
    </div>
    <div class="sub_title">
        新型冠状病毒肺炎
    </div>
    <div class="title">
        <h1>疫情实时大数据报告</h1>
    </div>
    <div class="readnum">
        共 8,173,099,278 人次已浏览
    </div>
</div>

<!-- 页面主体区域 -->
<div id="body_content" style="height: 100%">
    <!-- lab页 -->
    <div id="yiqing_lab">
        <div id="yiqing_in">
            <span class="active">国内疫情</span>
        </div>
        <div id="yinqing_out">
            <span><a href="#worldCountry">国外疫情</a></span>
        </div>
    </div>

    <!-- 国内疫情数据展示 -->
    <div id="yiqing_data_block">
        <div class="title">
            <div class="title-name">国内疫情</div>
            <span>数据更新至 2022 6.19 9:00</span>
        </div>
        <div id="box" class="content">
            <div data-text="来自国家、各省市卫健委公布的31省（自治区、直辖市）及港澳台的新增确诊病例；
<br><br>
本数据来自前一日数据加当日新增数据，由于各省卫健委公布时间及方式各不相同且存在核减情况，故而部分数据可能会有一定的时间延迟。" class="info_block">
                <span class="lab">新增确诊
                <span class="anser">
									<img class="anser-img" src="img/question-mark.f7b4fec.png"/>
								</span>
                </span>
                <span class="newAdd color1"></span>
                <!--                <span class="yestoday_num">昨日<span class="data">+66</span></span>-->
            </div>
            <div data-text="来自国家、各省市卫健委公布的31省（自治区、直辖市）新增本土病例，不包含港澳台；
<br><br>
本数据来自前一日数据加当日新增数据，由于各省卫健委公布时间及方式各不相同且存在核减情况，故而部分数据可能会有一定的时间延迟。" class="info_block">
                <span class="lab">新增本土                <span class="anser">
									<img class="anser-img" src="img/question-mark.f7b4fec.png"/>
								</span></span>
                <span class="newAdd color1"></span>
                <!--                <span class="yestoday_num">昨日<span class="data">+66</span></span>-->
            </div>
            <div class="info_block">
                <span class="lab">新增境外</span>
                <span class="newAdd color2"></span>
                <!--                <span class="yestoday_num">昨日<span class="data">+66</span></span>-->
            </div>
            <div data-text="新冠病毒无症状感染者（以下简称无症状）是指无相关临床症状，如发热、咳嗽、咽痛等可自我感知或可临床识别的症状与体征，但呼吸道等标本新冠病毒病原学检测阳性者。
<br><br>
“无症状”数据取自国家卫健委每日最新公布的“无症状感染者”数据（不包含港澳台）。" class="info_block">
                <span class="lab">新增无症状                <span class="anser">
									<img class="anser-img" src="img/question-mark.f7b4fec.png"/>
								</span></span>
                <span class="newAdd color3"></span>
                <!--                <span class="yestoday_num">昨日<span class="data">+66</span></span>-->
            </div>
            <div data-text="现有确诊为存量数据。<br><br>
计算方法为：现有确诊数=累计确诊数-累计治愈数-累计死亡数。" class="info_block">
                <span class="lab">现有确诊                <span class="anser">
									<img class="anser-img" src="img/question-mark.f7b4fec.png"/>
								</span></span>
                <span class="confirm color1"></span>
                <!--                <span class="yestoday_num">昨日<span class="data">+66</span></span>-->
            </div>
            <div class="info_block">
                <span class="lab">现有本土</span>
                <span class="confirm color1"></span>
                <!--                <span class="yestoday_num">昨日<span class="data">+66</span></span>-->
            </div>
            <div class="info_block">
                <span class="lab">现有境外</span>
                <span class="confirm color2"></span>
                <!--                <span class="yestoday_num">昨日<span class="data">+66</span></span>-->
            </div>
            <div class="info_block">
                <span class="lab">现有无症状</span>
                <span class="confirm color3"></span>
                <!--                <span class="yestoday_num">昨日<span class="data">+66</span></span>-->
            </div>
            <div class="info_block">
                <span class="lab">累计确诊</span>
                <span class="total color4" id="total0"></span>
                <span class="yestoday_num">较昨日<span class="data color4"></span></span>
            </div>
            <div class="info_block">
                <span class="lab">累计境外</span>
                <span class="total color2" id="total1"></span>
                <span class="yestoday_num">较昨日<span class="data color2"></span></span>
            </div>
            <div class="info_block">
                <span class="lab">累计治愈</span>
                <span class="total color5" id="total2"></span>
                <span class="yestoday_num">较昨日<span class="data" color5></span></span>
            </div>
            <div class="info_block">
                <span class="lab">累计死亡</span>
                <span class="total color6" id="total3"></span>
                <span class="yestoday_num">较昨日<span class="data color6"></span></span>
            </div>
        </div>
    </div>

    <!--    数据说明弹窗-->
    <div id="goodcover"></div>
    <div id="code">
        <div class="close1"><a href="javascript:void(0)" id="closebt"><img src="img/share-close.08f0789.png"></a>
        </div>
        <div class="codeTitle">数据说明</div>
        <div class="goodtxt">
            <p id="paragraph">
            </p>
        </div>
    </div>

    <!-- 地图区域 -->
    <div class="map_block">
        <!-- lab切换区 -->
        <div class="title">
            <div onclick="cumulative()" id="lab_left" class="lab_left active">
                累计确诊
            </div>
            <div onclick="yesterday()" id="lab_right" class="lab_right">
                新增确诊
            </div>

        </div>
        <!--        标题提示区-->
        <div id="titleTip" class="titleTip">累计确诊病例数，包含治愈、死亡</div>
        <!-- 地图区域 -->
        <div id="map" class="content">

        </div>
    </div>
    <div id="threeMap" class="chartsContent"></div>
    <div class="chooseCharts">
        <div class="chooseBox" onclick="choosed(this);makeChart1()">
				<span>
					新增
				</span>
            <span>
					本土趋势
				</span>
        </div>
        <div class="chooseBox" onclick="choosed(this);makeChart2()">
            <span>境外输入</span>
            <span>新增趋势</span>
        </div>
        <div class="chooseBox" onclick="choosed(this);makeChart3()">
            <span>境外输入</span>
            <span>省级TOP10</span>
        </div>
    </div>

    <!-- table区域-->
    <div style="padding: 20px;position: relative">
        <div class="nav1" >
            <div class="nav_title">
                <h4 ><b><i class="layui-icon layui-icon-release" style="color: aqua;"></i>&nbsp;疫情速报</b></h4>
                <div class="float" style="margin-top: 0.5rem;">
                    <span>该数据为31省（自治区、直辖市）本土新增，及港澳台新增确诊数据</span>
                    <span>数据说明</span>
                </div>
            </div>

            <div style="position: relative" >
                <table class="layui-hide" id="test" lay-filter="test"></table>
            </div>
        </div>
    </div>


    <!-- 国外疫情 -->
    <div id="worldCountry" class="item-inner">
        <!-- 标题 -->
        <div class="title">
            <div class="title-name">国外疫情</div>
            <div class="ps">
                <div class="inner-ps-left">
                    数据更新至 2022.06.16 10:01
                </div>
                <div data-text="国外数据说明:<br>        a) 数据来源：国外疫情数据来自权威机构的公开报道、世卫组织（WHO）、各国官方通报；<br>        b) 统计口径：因各国分不同时区，疫情数据日期统一采用北京时间的日期；新增数据与趋势图数据为昨日数据与前日数据相减的结果，每天更新一次；<br>        c) 更新时间：国外疫情数据因追踪、核实需要，与各国官方的发布时间相比较有一定的延迟。" class="inner-ps-right">
							<span><span class="anserTop">
								<img class="anser-img1" src="img/question-mark.f7b4fec.png" />
							</span></span>
                    <span class="data-illustrateTop">
								数据说明
							</span>
                </div>
            </div>
        </div>

        <!-- 一行 -->
        <div class="row">
            <div class="row-block">
                <div class="block-top">
							<span class="block-words" style="position: relative;">
								新增确诊

							</span>

                </div>
                <div id="confirmAdd" class="block-bottom color1">

                </div>
            </div>
            <div class="row-block">
                <div class="block-top">
							<span class="block-words">
								新增死亡

							</span>

                </div>
                <div id="deadCompare" class="block-bottom color6">

                </div>
            </div>
            <div class="row-block">
                <div class="block-top">
							<span class="block-words">
								现有确诊

							</span>

                </div>
                <div id="nowConfirm" class="block-bottom color1">

                </div>
            </div>

        </div>

        <!-- 一行 -->
        <div class="row">
            <div class="row-block">
                <div class="block-top">
							<span class="block-words">
								累计确诊
							</span>

                </div>
                <div id="confirm" class="block-bottom color3">

                </div>

            </div>
            <div class="row-block">
                <div class="block-top">
							<span class="block-words">
								累计死亡
							</span>

                </div>
                <div id="dead" class="block-bottom color6">

                </div>
                <div class="change">
                    死亡率<span id="deadRate" class="block2 color6"></span>
                </div>
            </div>
            <div class="row-block">
                <div class="block-top">
							<span class="block-words">
								累计治愈
							</span>

                </div>
                <div id="heal" class="block-bottom color5">

                </div>
                <div  class="change">
                    治愈率<span id="healRate" class="block3 color5"></span>
                </div>
            </div>

        </div>

    </div>

    <!-- 世界地图区域 -->
    <div style="max-height: 580px" class="map_block">
        <!-- lab切换区 -->
        <div class="title">
            <div onclick="confirmWorld()" id="lab_left2" class="lab_left active">
                累计确诊
            </div>
            <div onclick="nowConfirm()" id="lab_right2" class="lab_right">
                现有确诊
            </div>

        </div>
        <!--        标题提示区-->
        <div id="titleTip2" class="titleTip">累计确诊病例数，包含治愈、死亡</div>
        <!-- 地图区域 -->
        <div id="main" class="content">

        </div>

    </div>


</div>
<!--底部-->
<div class="foot">
    <div class="between">
        <span class="p"></span>
        <span>积极防护，保护自己，戴口罩，勤洗手</span>
        <span class="p"></span>
    </div>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
<script  type="text/javascript" src="js/world_fix.js"></script>
<script type="text/javascript" src="js/worldMap.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/total.js"></script>
<script type="text/javascript" src="js/newAdd.js"></script>
<script type="text/javascript" src="js/alert.js"></script>
<script type="text/javascript" src="js/threeCharts.js"></script>
<script type="text/javascript" src="js/world.js"></script>



</body>
</html>
